<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajax({
            url : "/show",//后台请求的数据，用的是PHP
            dataType : "json",//数据格式
            type : "post",//请求方式
            async : false,//false:同步   true:异步
            success : function(data) {   //如果请求成功，返回数据。
                console.log("前端请求后端成功，返回了数据");
                var html = "";
                for(var i=0;i<data.length;i++){    //遍历data数组
                    var ls = data[i];
                    html +=
                        "<tr align='center'>"
                        +"<td>"+ls.id+"</td>"
                        +"<td>"+ls.user_name+"</td>"
                        +"<td>"+ls.score+"</td>"
                        +"<td>"+ls.dept.deptid+"</td>"
                        +"<td>"+ls.dept.dname+"</td>"+
                        "</tr>";
                }
                $("#test").html(html); //在html页面id=test的标签里显示html内容
            },
        })
    });
</script>
<body>
<table width="50%" align="center" border="2">
    <tr align="center">
        <td>员工编号</td>
        <td>姓名</td>
        <td>成绩</td>
        <td>部门编号</td>
        <td>部门名</td>
    </tr>
    <tbody id="test">
    </tbody>
</table>
</body>
</html>